<template>
    <ak-page-code>components</ak-page-code>
    <ak-title>AKjs前端框架</ak-title>
    <ak-main>
        <div class="module mt_2 ml_1">
            <section class="fl ml_2 w_47 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">使用方法</h3>
                </fieldset>
                <article class="pos_rel ovh h_35_rem bg_white">
                    <div class="plug_tabs_code wm_96">
                        <nav class="ovh press bg_white">
                            <ul class="ovh list_h_3rem nav_line_c length3">
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">HTML</li>
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">插件调用</li>
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">按需引入</li>
                            </ul>
                        </nav>
                        <article class="pos_rel ovh mt_2">
                            <div class="pos_rel ovh bg_white h_24_rem">
                                <section class="pos_rel ovh h_in">
                                    <!--HTML-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
    <div class="module press bg_white">
        <h3 class="bg_white c_theme pl_3 mb_2 line_h_36rem bor_bottom bor_gray_ddd">圆形统计插件</h3>
        <div class="plug_circliful fl" data-dimension="120" data-text="35%" data-info="当前进度" data-width="10" data-font_size="1.2rem" data-percent="35" data-prog_color="#4cafe9" data-bg_color="#dddddd" data-font_color="#ffffff" data-fill_color="#999999"></div>
        <div class="plug_circliful fl" data-dimension="120" data-text="65%" data-info="当前进度" data-width="10" data-font_size="1.2rem" data-percent="65" data-prog_color="#19d100" data-bg_color="#dddddd"></div>
        <div class="plug_circliful fl" data-dimension="120" data-text="85%" data-info="当前进度" data-width="10" data-font_size="1.2rem" data-percent="85" data-prog_color="#d94945" data-bg_color="#dddddd" data-type="spacing" data-font_color="#ffffff" data-spacing_color="#ff7e00"></div>
  </div>
</textarea>
                                </section>
                                <section class="pos_rel ovh h_in">
                                    <!--插件调用-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
    $(function(){
        $('.plug_circliful').AKjs_Circliful({
            animationStep: 0.2 //动画毫秒设置
        });
        /*
        data-dimension === 整个圆形的宽高
        data-text === 圆形里的大标题
        data-info === 圆形里的小标题
        data-width="30" === 当前参数进度条边框宽度设置
        data-prog_color === 当前参数进度条边框颜色设置
        data-font_size  === 圆形里的大标题文字大小（px）
        data-percent  === 当前参数设置（百分比）
        data-font_color === 大标题和小标题文字颜色设置
        data-bg_color === 整个圆形的边框颜色
        data-fill_color === 里面填充颜色设置
        data-spacing_color === 整个圆形的边框颜色
        data-type="spacing" === 饼图类型设置 （half, spacing）；空值代表默认类型
        */
    });
</textarea>
                                </section>
                                <section class="pos_rel ovh h_in">
                                    <!--按需引入-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
    AKjs_Plugin("AKjs_Circliful"); //圆形统计插件
</textarea>
                                </section>
                            </div>
                        </article>
                    </div>
                    <fieldset class="wm_96 mt_2 mb_2">
                        <button type="button" class="plug_submit btn_h_au w_100 bg_theme c_white h_32rem">运行测试</button>
                    </fieldset>
                </article>
            </section>
            <section class="fr mr_2 w_47 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">效果展示</h3>
                </fieldset>
                <article class="pos_rel ova h_35_rem bg_white05">
                    <div class="plug_preview pos_rel ovh pa_2"></div>
                </article>
            </section>
        </div>
    </ak-main>

    <ak-plugin></ak-plugin>
</template>

<script type="text/javascript">
    //引入AKjs功能插件的区域
</script>

<style type="text/css">
    /*样式覆盖区域*/
</style>

<!--
//注：template，ak-page-code，ak-title，ak-plugin，script，style等这些元素在页面中不能多个使用否则代码无效；
路由页面的布局结构使用方法（必须用以下的结构使用）：
<template>
    <ak-page-code></ak-page-code>
    <ak-title></ak-title>
    <div></div>
    <ak-plugin></ak-plugin>
</template>
<script>
</script>
<style>
</style>
-->
